<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <button class="btn1">新增</button>
        <ul class="list">
            <li class="first">1</li>
            <li>2</li>
            <li class="mid">3</li>
            <li>4</li>
            <li>5</li>
            <li class="last">6</li>
        </ul>
    </div>
</body>
<script>
    // 节点
    // 文档节点  元素节点 属性节点 文本节点 注释节点

    var ul = document.getElementsByClassName("list")[0];
    var mid = document.getElementsByClassName("mid")[0];
    var btn1 = document.getElementsByClassName("btn1")[0];


    // 如何新增节点?  节点新增之后默认存储在内存当中,放到页面中才会显示
    // document.createElement(tagName) 根据传入的标签名 创建一个元素节点
    
    // 如何将节点放到页面中    
    // (1) 放到父元素中       append(追加 => 放在父元素所有内容的最后方)  prepend(预追加 => 放在父元素所有内容的最前方)
    //   ParentNode.appendChild(Node)   向匹配的元素(父节点) 追加一个 节点(新的/页面中已存在的)
    //   ParentNode.append(Node|string)   向匹配的元素(父节点) 追加一个节点/字符串(新的/页面中已存在的)

    //  ParentNode.prepend(Node|string)   向匹配的元素(父节点) 预追加一个节点/字符串(新的/页面中已存在的)




    // 点击按钮  新增一个li  放到.list中
    btn1.onclick = function(){
        var li =  document.createElement("li");
 
        li.innerText = "我是新增的li";
        li.style.width = Math.round(Math.random()*100 + 50) + "px";
        li.style.height = Math.round(Math.random()*100 + 50) + "px";
        li.style.backgroundColor = randColor();

        li.onclick = function(){
            console.log(this);
        }
        console.log(li);

        // ul.appendChild(li);
        // ul.append(li);
        // ul.append("hello");

        // ul.prepend(li);

        ul.appendChild(ul.firstElementChild);

    }




    function randColor() {
        var str = "0123456789abcdef";

        var colorStr = "#";
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * str.length);
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }



</script>

</html>